<template>
  <el-main :style="{background: '#ebebeb'}">
    <el-row class="body-card">
      <h3 style="cursor: pointer" @click="routerBack"><i class="el-icon-arrow-left"></i>{{title}}</h3>
      <Divider/>
      <el-row>
        <el-form :model="formData"  ref="Form" labelWidth="100px">
          <el-form-item label="标题：" prop="username">
            <el-input type="text" v-model="formData.title"  placeholder="请输入标题"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者：" prop="password">
            <el-input type="text" v-model="formData.author"  placeholder="请输入作者名" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="栏目：" prop="password">
            <el-input type="text" v-model="formData.classify"   placeholder="请输入栏目（如国内游，国外游等）" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item label="内容：" prop="password">
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入内容"
              v-model="formData.content">
            </el-input>
          </el-form-item>
          <el-form-item :style="{paddingTop:'20px'}">
            <el-button :style="{width:'150px'}" type="primary"  @click="editguide" size="medium">提交</el-button>
            <el-button :style="{width:'150px'}" type="primary" @click="routerBack" size="medium">取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-row>
  </el-main>
</template>

<script>
import {
   guideServer
} from "../../../api/backstage";

  export default {
    name: "referenceArticle",
    data() {
      return {
        title: "",
        searchId: null,
        formData: {
          id: null,
          title: "",
          author: '',
          classify: '',
          content: ''
        }
      };
    },
    mounted() {
      const {path} = this.$route.matched[1];
      const {params} = this.$route;
      switch (path) {
        case '/backstage-manager/reference-new':
          this.title = '新建攻略';
          break;
        case '/backstage-manager/reference-edit/:guideid/:guidetitle/:authornme/:guidesrc/:guidetext':
          this.title ='修改攻略';
          this.searchId = params.guideid;
          this.formData.id= params.guideid;
          this.formData.title=params.guidetitle;
          this.formData.author=params.authornme;
          this.formData.classify=params.guidesrc;
          this.formData.content=params.guidetext;
          break;
      }
      this.queryData();
    },
    methods: {
      queryData() {
        //通过searchId来调取数据库
        this.searchId;
        this.formData.title=params.guidetitle;
        this.formData.author=params.authornme;
        this.formData.classify=params.guidesrc;
        this.formData.content=params.guidetext;  },
      editguide(){
        if(this.searchId!=null){
          console.log("修改攻略")
          guideServer("put", {
            id:this.this.formData.id,
            title:this.formData.title,
            author_name:this.formData.author,
            author_name:this.formData.author,
            class_tag:this.formData.classify,
            content:this.formData.content,
          }).then(
        suc => {
          const { code, message} = suc.data;
           if (code) {
                this.$message({
                  type: "success",
                  message
                }); 
              }  else {
            this.$message({
              type: "error",
              message
            }); 
		  } 
		  },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        })
        }
        else{
           guideServer("post", {
            title:this.formData.title,
            author_name:this.formData.author,
            author_name:this.formData.author,
            class_tag:this.formData.classify,
            content:this.formData.content,
          }).then(
            suc => {
              console.log(suc);
            },
            err => {
              console.log(err);
            }
          );
        }

      },
      routerBack() {
        this.$router.push({
          path: `/backstage-manager/reference-manager`
        });
      }
    }
  };
</script>
<style lang="less">

</style>
